<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"/>
	<meta name="baidu-site-verification" content="JdMif0g2tL" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>angular</title>
</head>
<body ng-app="myApp">
<style type="text/css" media="screen">
	*{
		margin: 0;
		padding: 0;
	}
	span{
		color: red;
		font-size:14px; 
	}
</style>

<div ng-controller="appCtrl">
	<input type="text" required ng-model="abc" my-deal="请输入正确文案">
	<input type="text" ng-model="tel" ng-pattern="/^1\d{10}$/" my-deal="请输入正确手机号">
</div>

<script type="text/javascript">
	document.getElementsByTagName('html')[0].style.fontSize=window.screen.width/10+'px';
</script>
<script src="../js/angular.min.js" charset="utf-8"></script>
<script type="text/javascript">
	var app =angular.module('myApp', []);
	
	app.controller('appCtrl', ['$scope', function($scope){
		$scope.abc='hellow';
		$scope.tel='';
	}]);
	//当指令不合法的时候，我们在表单元素的后面添加一个提示框，并且将表单元素边框变红色
	app.directive('myDeal', function () {
		return {
			restrict: 'A',
			require:'ngModel',
			link:function(scope,jqlite,attrs,ctrl){
				var span=document.createElement('span');
				span.innerHTML=attrs.myDeal;
				var hasAdd=false;
				scope.$watch(attrs.ngModel, function(newValue, oldValue, scope) {
					if(ctrl.$invalid){
						jqlite.css('borderColor','red');
						if (!hasAdd) {
							jqlite.after(span);
							hasAdd=true;
						}
						span.style['display']='block';
					}else{
						jqlite.css('borderColor','black');
						span.style['display']='none';
					}
				});
				console.log(arguments);
			}
		};
	})
</script>
</body>
</html>
<!--应该是13.11，时间-2017-05-08->